<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>honeychat</title>

</head>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/plugins/fa/css/font-awesome.css" rel="stylesheet">
<link href="/css/layer.css" rel="stylesheet">
<link href="/plugins/layui/css/layui.css" rel="stylesheet">
<link href="/css/honeychat.css" rel="stylesheet">
<link href="/css/honey.css" rel="stylesheet">
<body>
<br><br><br><br>
<div class="container zbody">
	<div class="row clearfix">
		<div class="col-md-12 column text-center">
			<h1>欢迎:<span class="textzhi">[[${user.loginName}]]</span>加入聊天室</h1>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-2 column">
		</div>
		<div class="col-md-8 column">
			<div class="col-md-3 visible-lg-block contl" id="honeynav">
				<div class="outer">
					<div id="users">
						<ul id="usersli">
						</ul>
					</div>
				</div>
			</div>
			<div id="contr" class="col-md-9 contr">
				<p class="hand menu-btn visible-lg-block"><i id="menubar" class="fa fa-bars fa-2x" aria-hidden="true"></i></p>
				<div class="outer">
					<div id="msgpanel">
		    		</div>
				</div>
		    	
		    	<div class="sendbar">
		    		<span class="bar hand" id="icon" onclick="alerticon()" title="表情"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></span>
		    		<span class="bar hand" onclick="cleanmsg()" title="清空聊天记录"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></span>
		    		<span class="bar hand" onclick="setup()" title="设置"><i class="fa fa-cog fa-2x" aria-hidden="true"></i></span>
		    		<span class="hand pull-right" id="sendbtn" onclick="sendmsg()"><i class="fa fa-send fa-2x" aria-hidden="true"></i></span>
		    	</div>
		    	<div contenteditable="true" id="msgbody" onkeyup="if(event.keyCode==13) {document.getElementById('sendbtn').click();}"></div>
			</div>
			
		</div>
		<div class="col-md-2 column">
		</div>
	</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/layer/layer.min.js"></script>
<script src="/plugins/layui/layui.js"></script>
<script src="/js/honey.js"></script>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.min.js"></script>
<script src="/js/honeychat.js"></script>
</body>
<script type="text/javascript">
	var websocket = null;
	var icon = '';
	$(function(){
		conect();
		//加载表情
		for (var i=1;i<72;i++){
			icon+="<img class='hand' onclick='selecticon(this)' src='/plugins/layui/images/face/"+i+".gif'>";
			if(i%8==0){
				icon+="<br>"
			}
		}
		icon+="<img class='hand' onclick='selecticon(this)' src='/plugins/layui/images/face/0.gif'>";
		$("#menubar").click()
		//inituser();
	})
	
	var menuBtn = document.querySelector('#menubar');
	var nav = document.getElementById("honeynav");
	var isbaropen=true;
	menuBtn.addEventListener('click', () => {
	    nav.classList.toggle('nav-open');
	    if(isbaropen){
	    	$("#menubar").attr("class","fa fa-window-close fa-2x");
	    	isbaropen=false;
	    }else{
	    	$("#menubar").attr("class","fa fa-bars fa-2x");
	    	isbaropen=true;
	    }
	    
	})
	
	var conect = function(){
		if('WebSocket' in window){
			websocket = new WebSocket("ws://"+location.host+"/honeychat");
		}else{
		    layer.alert("不支持websocket");
		}
	
		//连接发生错误的回调方法
		websocket.onerror=function(){
			setMessageInnerHTML("error");
		}
		
		//连接成功建立的回调方法
		websocket.onopen=function(event){
			layer.msg("连接成功");
			//adduser([[${user.userId}]],'[[${user.avatar}]]','[[${user.loginName}]]');
		}
		
		//接收到消息的回调方法
	    websocket.onmessage = function(event) {
	    	setMessageInnerHTML(event.data);
	    	scrollbottom();
	        
	    }
		
	    //连接关闭的回调方法
	    websocket.onclose = function(obj) {
	    	layer.alert("已与服务器端口", {icon: 2});
	    }
	    
	  	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	    window.onbeforeunload = function(obj) {
	        websocket.close();
	    }
		
	} 

	//将自己的消息显示在网页上
	function setMessageInnerHTMLSel(obj) {
		obj='<div class="item right"><img class="header-img" title="[[${user.loginName}]]" src="[[${user.avatar}]]" /><p class="message">'+obj+'</p></div>'
		$("#msgpanel").append(obj);
	}
	
	
</script>
</html>